<style>
    table {
        border-collapse: collapse;
    }
    td {
        border: 1px solid #000000;
    }
</style>
<script src="../../resources/check-layout.js"></script>
<script>
    function calls() {
        removeCol();
        checkLayout('tr');
    }

    function removeCol() {
        var mutatedTable = document.getElementById("mutated-table");
        var trElements = mutatedTable.getElementsByTagName('tr');

        for (var i = 0; i < 3; i++) {
            // Remove the third child in each row
            var tr = trElements[i];
            var tdElements = tr.getElementsByTagName('td');
            var td = tdElements[2];
            tr.removeChild(td)
        }
    }
</script>
<body onload="calls()">
    <h3>Test for chromium bug : <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=396653">396653</a>. Tables with specific merge cell configuration render improperly when removing table column.</h3>
    <h4>Second row is rowspan-only-cell and some empty cells present in the row because td node is deleted from the dom tree using script. So Please check that second row height should not be zero in this case.</h4>
    <table id="mutated-table" style="width: 624px;">
        <tbody>
            <tr data-expected-height="32">
                <td rowspan="2" style="height: 117px;"></td>
                <td style="height: 32px;"></td>
                <td style="height: 32px;"></td>
            </tr>
            <tr data-expected-height="85">
                <td style="height: 32px; display: none;"></td>
                <td rowspan="2" style="height: 117px;"></td>
                <td style="height: 84px;"></td>
            </tr>
            <tr data-expected-height="32">
                <td style="height: 32px;"></td>
                <td style="height: 32px; display: none;"></td>
                <td style="height: 32px;"></td>
            </tr>
        </tbody>
    </table>
</body>
